<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        function showpos(event) {
            document.all.x.value = event.clientX;
            document.all.y.value = event.clientY;
        }
        function Point() {
            this.x, this.y;
            this.eventpos = function () {
                this.x = event.clientX;
                this.y = event.clientY;
            }
            this.setpos = function (pt) {
                this.x = pt.x;
                this.y = pt.y;
            }

        }
        var ptPre = new Point();
        var ptCur = new Point();

        function move(ptTo, ptFrom) {
            ox = ptTo.x - ptFrom.x;
            oy = ptTo.y - ptFrom.y;
            event.srcElement.style.posLeft += ox;
            event.srcElement.style.posTop += oy;
        }
    </script>

    <style type="text/css">
        .dr {
            position: relative;
            cursor: hand;
            event: expression(
                ondragstart=function()
                {
                ptCur.eventpos();
                ptPre.eventpos();
                },
                ondrag=function(){
                    ptCur.eventpos();
                     move(ptCur,ptPre);
                    ptPre.setpos(ptCur);
                }
                )
        }
    </style>
</head>
<body onmousemove="showpos()">
<form>
    <div class="dr">X:<input name="x" id="x" type="text"/></div>
    <div class="dr">Y:<input name="y" id="y" type="text"/></div>
</form>
<img class="dr" src="free_register.gif" mce_src="free_register.gif"/>
<br/>

<div class="dr">Select me,and drag</div>
</body>
</html>